<template>
  <div>
    <h1>JT Table Column Filter Template</h1>
    <!-- 筛选列 -->
    <!-- 
      table-key
        表格编号
        必填
        数字
      header-data
        表格 header 内可以显示的列
        必填
        数组
      filter-column
        表格 body 内可以显示的列
        必填
        数组
     -->
    <div>
      <jt-table-column-filter :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" :key='tableKey'>
      <el-table-column :key='item' v-for='item in filterColumnData' :label="getTableHeaderLabel(item)" :prop="item">
        <template slot-scope="scope">
          {{scope.row[item]}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import JtTableColumnFilter from './index';
  export default {
    name: 'JtTableColumnFilterTemplate',
    components: {
      'jt-table-column-filter': JtTableColumnFilter,
    },
    data() {
      return {
        tableData: [{
          id: '1',
          date: '2016-05-03',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '2',
          date: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '3',
          date: '2016-05-04',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        tableKey: 1,
        filterColumnData: [],
        tableHeaderArr: [{
            'name': 'id',
            'alias': '编号',
            'default': true,
          },
          {
            'name': 'name',
            'alias': '姓名',
            'default': false,
          },
          {
            'name': 'date',
            'alias': '日期',
            'default': false,
          },
          {
            'name': 'address',
            'alias': '地址',
            'default': false,
          }
        ],
      }
    },
    methods: {
      getTableHeaderLabel(str) {
        for (var value of this.tableHeaderArr) {
          if (value['name'] == str) {
            return value['alias'];
          }
        }
      }
    }
  }

</script>
